<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/echarts/echarts.min.js"></script>
    <script src="/echarts/jquery-1.10.2.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '电影类型偏好',
            subtext: '南丁格尔玫瑰图',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x : 'center',
            y : 'bottom',
            data:['动作 51.3%','爱情 13.1%','喜剧 11%','科幻 10.4%','动画 5.5%','魔幻 4.4%','剧情 2.6%','惊悚 1.1%','战争 0.5%']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [

            {
                name:'面积模式',
                type:'pie',
                radius : [30, 110],
                center : ['50%', '50%'],
                roseType : 'area',
                data:[
                    {value:513, name:'动作 51.3%'},
                    {value:131, name:'爱情 13.1%'},
                    {value:110, name:'喜剧 11%'},
                    {value:104, name:'科幻 10.4%'},
                    {value:55, name:'动画 5.5%'},
                    {value:44, name:'魔幻 4.4%'},
                    {value:26, name:'剧情 2.6%'},
                    {value:11, name:'惊悚 1.1%'},
                    {value:5, name:'战争 0.5%'},
                ]
            }
        ]
    };


    var data = [{
        value:496,
        name: '其他'
    }, {
        value: 359,
        name: '白领'
    }, {
        value: 145,
        name: '学生'
    }];
    option2 = {
        title: {
            text: '职业'
        },
        backgroundColor: 'rgba(255,255,255,0)',
        tooltip: {
            show: false,
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            orient: 'horizontal',
            bottom: '0%',
            data: ['其他', '白领', '学生']
        },
        series: [{
            type: 'pie',
            selectedMode: 'single',
            radius: ['40%', '58%'],
            color: ['#AF89D6', '#59ADF3', '#FF999A', '#FFCC67','#FCC667','#CC5962'],

            label: {
                normal: {
                    position: 'inner',
                    formatter: '{d}%',

                    textStyle: {
                        color: '#fff',
                        fontWeight: 'bold',
                        fontSize: 12
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: data
        }]
    };



    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart2.setOption(option2);
</script>
</body>
</html>